<template>
  <div class="page-wrapper">
    <header class="m-search-header">
      <el-select class="select-portal" v-model="searchData.searchPortal">
        <el-option
          v-for="p of portalList"
          :key="p"
          :value="p"
          :label="`${p}`"
        ></el-option>
      </el-select>
      <el-input
        class="search-input"
        v-model="searchData.searchURL"
        :placeholder="
          $t('COMMON.PleaseInput', {
            // input: $t('COMMON.Content'),
            input: 'URL ......',
          })
        "
      />
      <el-button type="primary" @click="onSwitch">
        {{ isShowContent ? "Hide" : "Show" }}
      </el-button>
      <el-button @click="onReset">
        {{ $t("COMMON.Reset") }}
      </el-button>
      <el-button :disabled="!isShowContent" type="success" @click="onCreatePDF">
        {{ $t("ROUTES.CreatePDF") }}
      </el-button>
    </header>
    <el-card class="m-content-card" v-show="isShowContent">
      <div id="pdf-tpl" ref="pdf" :style="{ width: '100%', height: '100%' }">
        <!-- 112233 -->
      </div>
    </el-card>
  </div>
</template>

<script>
import PdfGenerator from "@/libs/PdfGenerator";

import articleTpl from "./data/article.tpl";

export default {
  name: "CreatePDFPage",
  data() {
    return {
      portalList: ["http://", "https://"],
      searchData: {
        searchPortal: "http://",
        searchURL: "",
      },
      isShowContent: false,
      /** @type {PdfGenerator} PdfGenerator's instance */
      pdf: null,
      articleTpl,
    };
  },
  computed: {
    fullURL() {
      const { searchPortal, searchURL } = this.searchData;
      return `${searchPortal}${searchURL}`;
    },
  },
  mounted() {
    this.pdf = new PdfGenerator({
      title: "bibilailai",
      template: articleTpl,
    });
  },
  methods: {
    onReset() {
      this.searchData.searchURL = "";
      this.isShowContent = false;
    },
    onSwitch() {
      this.isShowContent = !this.isShowContent;
    },
    onCreatePDF() {
      this.pdf.download(this.$refs["pdf"]);
    },
  },
};
</script>

<style scoped lang="scss">
.page-wrapper {
  width: 100%;

  .m-search-header {
    // text-align: center;

    .select-portal {
      width: 96px;
    }
    .search-input {
      width: 500px;
      margin: 0 8px;
    }
  }

  .m-content-card {
    margin-top: 16px;
  }
}
</style>
